<template>
  <NvCrud :option :data>
    <template #name_view="{ rowData }">
      <div>{{ `(${rowData.name})` }}</div>
    </template>
    <template #sex_view="{ rowData, mode }">
      <NTag v-if="mode === 'cell'" type="info">
        {{ `${rowData.sex}(${mode})` }}
      </NTag>
      <template v-else>
        {{ `${rowData.sex}(${mode})` }}
      </template>
    </template>
    <template #role_view="{ rowData, dictData, loading }">
      <NButton v-if="loading" loading text />
      <template v-else>
        {{ dictData?.find((item: any) => item.value === rowData.role)?.label || rowData.role }}
      </template>
    </template>
  </NvCrud>
</template>

<script setup lang="tsx">
import type { NvCrudOption } from 'nv-crud'
import { NButton, NTag } from 'naive-ui'
import { NvCrud } from 'nv-crud'

const data = Array.from({ length: 3 }, (_, i) => ({
  id: i + 1,
  name: `name${i + 1}`,
  sex: i % 2 === 0 ? '男' : '女',
  age: i + 1,
  role: i % 2 === 0 ? 'admin' : 'user',
}))

const option: NvCrudOption = {
  rowActions: {
    width: 90,
    editBtn: false,
    delBtn: false,
  },
  actionbar: false,
  toolbar: false,
  fields: {
    name: {
      title: '姓名',
      render: ({ rowData, rowIndex }) => {
        return `(${rowIndex})_${rowData.name}`
      },
    },
    sex: {
      title: '性别',
    },
    age: { title: '年龄' },
    role: {
      title: '角色',
      dict: () => {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve([
              { label: '管理员', value: 'admin' },
              { label: '普通用户', value: 'user' },
            ])
          }, 2000)
        })
      },
    },
  },
}
</script>
